import React, { useState } from 'react';
import classNames from 'classnames';
import { RouteConfigComponentProps } from 'react-router-config';
import { catchError } from '@/hoc';
import { sleep } from '@/utils';
import styles from './index.module.scss';
import stores from '../../stores';

const Login = (props: RouteConfigComponentProps<void>) => {
  const [hasLogged, setHasLogged] = useState(false);
  const login = async (e: React.MouseEvent) => {
    e.preventDefault();
    setHasLogged(true);

    const url = 'joke';
    stores.commonStore.setCurrentRoute(url);
    await sleep(2000);
    props.history.push(url);
  };

  return (
    <div className={classNames(styles.wrapper, {
      [styles.formSuccess]: hasLogged,
    })}
    >
      <div className={styles.container}>
        <h1>Welcome</h1>

        <form className={styles.form}>
          <input type="text" placeholder="用户名" />
          <input type="password" placeholder="密码" />
          <button type="submit" onClick={login}>Login</button>
        </form>
      </div>

      <ul className={styles.bgBubbles}>
        <li />
        <li />
        <li />
        <li />
        <li />
        <li />
        <li />
        <li />
        <li />
        <li />
      </ul>
    </div>
  );
};

export default catchError(Login);
